<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">数据总览</h1>
      <div class="page-subtitle">实时监控系统关键指标</div>
    </div>

    <!-- 统计卡片区域 -->
    <a-row :gutter="[16, 16]" class="statistic-row">
      <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <a-card class="stat-card stat-card-green" hoverable>
          <a-statistic
            title="总用户数"
            :value="1258"
            :precision="0"
            :value-style="{ color: '#fff' }"
          >
            <template #prefix>
              <user-outlined style="color: '#fff'" />
            </template>
            <template #suffix>
              <span style="color: '#fff'">↑ 12%</span>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <a-card class="stat-card stat-card-blue" hoverable>
          <a-statistic
            title="今日访问"
            :value="236"
            :precision="0"
            :value-style="{ color: '#fff' }"
          >
            <template #prefix>
              <eye-outlined style="color: '#fff'" />
            </template>
            <template #suffix>
              <span style="color: '#fff'">↑ 8%</span>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <a-card class="stat-card stat-card-orange" hoverable>
          <a-statistic
            title="转化率"
            :value="26.5"
            :precision="1"
            suffix="%"
            :value-style="{ color: '#fff' }"
          >
            <template #prefix>
              <transaction-outlined style="color: '#fff'" />
            </template>
            <template #suffix>
              <span style="color: '#fff'">↑ 2.3%</span>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <a-card class="stat-card stat-card-purple" hoverable>
          <a-statistic
            title="平均停留"
            :value="8.5"
            :precision="1"
            suffix="分钟"
            :value-style="{ color: '#fff' }"
          >
            <template #prefix>
              <clock-circle-outlined style="color: '#fff'" />
            </template>
            <template #suffix>
              <span style="color: '#fff'">↑ 0.5</span>
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <!-- 主图表区域 -->
    <a-row :gutter="[16, 16]" class="charts-row">
      <a-col :xs="24" :md="24" :lg="16" :xl="16">
        <a-card title="用户增长趋势" class="main-chart-card">
          <Chart :options="userGrowthOptions" :style="{ height: '400px' }" />
        </a-card>
      </a-col>
      <a-col :xs="24" :md="24" :lg="8" :xl="8">
        <a-card title="访问来源分布" class="chart-card">
          <Chart :options="sourceDistributionOptions" :style="{ height: '400px' }" />
        </a-card>
      </a-col>
    </a-row>

    <!-- 辅助图表区域 -->
    <a-row :gutter="[16, 16]" class="charts-row">
      <a-col :xs="24" :md="12" :lg="12" :xl="12">
        <a-card title="用户活跃度趋势" class="chart-card">
          <Chart :options="activityTrendOptions" :style="{ height: '300px' }" />
        </a-card>
      </a-col>
      <a-col :xs="24" :md="12" :lg="12" :xl="12">
        <a-card title="用户画像分析" class="chart-card">
          <Chart :options="userProfileOptions" :style="{ height: '300px' }" />
        </a-card>
      </a-col>
    </a-row>

    <!-- 热力图区域 -->
    <a-row :gutter="[16, 16]" class="charts-row">
      <a-col :xs="24" :md="24" :lg="24" :xl="24">
        <a-card title="访问时段热力图" class="chart-card">
          <Chart :options="heatmapOptions" :style="{ height: '300px' }" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { UserOutlined, EyeOutlined, TransactionOutlined, ClockCircleOutlined } from '@ant-design/icons-vue';
import { Row, Col, Card, Statistic } from 'ant-design-vue';
import Chart from '../components/Chart.vue';
import * as echarts from 'echarts';
// 用户增长趋势图表配置
const userGrowthOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        lineStyle: {
          color: '#ccc'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '用户数',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0'
        }
      }
    }
  ],
  series: [
    {
      name: '新增用户',
      type: 'bar',
      barWidth: '60%',
      data: [120, 132, 101, 134, 90, 230],
      itemStyle: {
        borderRadius: [4, 4, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#1890ff' },
          { offset: 1, color: '#40a9ff' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#40a9ff' },
            { offset: 1, color: '#69c0ff' }
          ])
        }
      }
    }
  ]
});

// 访问来源分布图表配置
const sourceDistributionOptions = ref({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 10,
    top: 'center',
    textStyle: {
      fontSize: 12
    }
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['65%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 335, name: '直接访问', itemStyle: { color: '#1890ff' } },
        { value: 310, name: '搜索引擎', itemStyle: { color: '#52c41a' } },
        { value: 234, name: '外部链接', itemStyle: { color: '#faad14' } },
        { value: 135, name: '社交媒体', itemStyle: { color: '#eb2f96' } },
        { value: 1548, name: '其他', itemStyle: { color: '#8c8c8c' } }
      ]
    }
  ]
});

// 用户活跃度趋势图表配置
const activityTrendOptions = ref({
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#f0f0f0'
      }
    }
  },
  series: [
    {
      name: '活跃用户',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
      smooth: true,
      lineStyle: {
        width: 3,
        color: '#faad14'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(250, 173, 20, 0.3)' },
          { offset: 1, color: 'rgba(250, 173, 20, 0.05)' }
        ])
      },
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#faad14',
        borderColor: '#fff',
        borderWidth: 2
      },
      emphasis: {
        symbolSize: 10
      }
    }
  ]
});

// 用户画像雷达图配置
const userProfileOptions = ref({
  tooltip: {},
  legend: {
    data: ['用户特征'],
    bottom: 0
  },
  radar: {
    indicator: [
      { name: '年龄层次', max: 100 },
      { name: '消费能力', max: 100 },
      { name: '活跃度', max: 100 },
      { name: '忠诚度', max: 100 },
      { name: '分享意愿', max: 100 },
      { name: '内容偏好', max: 100 }
    ],
    radius: '65%'
  },
  series: [
    {
      name: '用户特征',
      type: 'radar',
      data: [
        {
          value: [75, 82, 90, 65, 88, 78],
          name: '用户特征',
          areaStyle: {
            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
              { offset: 0, color: 'rgba(72, 207, 173, 0.8)' },
              { offset: 1, color: 'rgba(72, 207, 173, 0.1)' }
            ])
          },
          lineStyle: {
            color: '#48cfad'
          },
          itemStyle: {
            color: '#48cfad'
          }
        }
      ]
    }
  ]
});

// 访问时段热力图配置
const heatmapOptions = ref({
  tooltip: {
    position: 'top'
  },
  grid: {
    height: '60%',
    top: '10%'
  },
  xAxis: {
    type: 'category',
    data: ['0时', '3时', '6时', '9时', '12时', '15时', '18时', '21时'],
    splitArea: {
      show: true
    },
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  yAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    splitArea: {
      show: true
    },
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%',
    inRange: {
      color: ['#bae7ff', '#1890ff', '#0958d9']
    }
  },
  series: [
    {
      name: '访问量',
      type: 'heatmap',
      data: [
        [0, 0, 5], [0, 1, 10], [0, 2, 15], [0, 3, 20], [0, 4, 15], [0, 5, 30], [0, 6, 25],
        [1, 0, 10], [1, 1, 15], [1, 2, 20], [1, 3, 25], [1, 4, 20], [1, 5, 35], [1, 6, 30],
        [2, 0, 15], [2, 1, 20], [2, 2, 25], [2, 3, 30], [2, 4, 25], [2, 5, 40], [2, 6, 35],
        [3, 0, 20], [3, 1, 25], [3, 2, 30], [3, 3, 35], [3, 4, 30], [3, 5, 45], [3, 6, 40],
        [4, 0, 25], [4, 1, 30], [4, 2, 35], [4, 3, 40], [4, 4, 35], [4, 5, 50], [4, 6, 45],
        [5, 0, 30], [5, 1, 35], [5, 2, 40], [5, 3, 45], [5, 4, 40], [5, 5, 55], [5, 6, 50],
        [6, 0, 35], [6, 1, 40], [6, 2, 45], [6, 3, 50], [6, 4, 45], [6, 5, 60], [6, 6, 55],
        [7, 0, 40], [7, 1, 45], [7, 2, 50], [7, 3, 55], [7, 4, 50], [7, 5, 65], [7, 6, 60]
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});

// 确保echarts正确加载
// let echarts;
// import * as echartsModule from 'echarts';
// echarts = echartsModule;
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 14px;
  color: #8c8c8c;
}

.statistic-row {
  margin-bottom: 24px;
}

.charts-row {
  margin-bottom: 24px;
}

.stat-card {
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  transform: translateY(0);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.stat-card-green {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
}

.stat-card-blue {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
}

.stat-card-orange {
  background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
}

.stat-card-purple {
  background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
}

.chart-card,
.main-chart-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  transition: all 0.3s ease;
  border: none;
}

.chart-card:hover,
.main-chart-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.main-chart-card {
  height: 100%;
}
</style>